<template>
	<view class="content">
		<!-- 上 -->
		<view class="header">
			<view class="hl">
				<view style="line-height: 30rpx;">时间：</view>
				<picker mode="selector" :range="columns" @change="pickChange">
					<view class="picker-box">
						{{ columns[index] }}
						<image src='/static/xia.png' class="icon-xia"></image>
					</view>
				</picker>
			</view>
			<view class="hr" @click="refresh">
				<image src="../../static/shuaxin.png" class="icon-shuaxin"></image>
				<view>刷新</view>
			</view>
		</view>
		<!-- 中 -->
		<view class="body">
			<!-- 订单 -->
			<view class="bl"  @click="selectOne">
				<view class="btext">支付订单数</view>
				<view class="bnum" :class="{ active: selected === 1}">{{totalOrderCount}}</view>
			</view>
			<!-- 收益 -->
			<view class="br" @click="selectTwo">
				<view class="btext">收益</view>
				<view class="bnum"  :class="{ active: selected === 2}">¥{{totalMerchantAmount}}</view>
				
			</view>

		</view>
		<!-- 下 -->
		<view class="bottom" v-if="selected==1">
				<view class="good" v-for="(order,idx) in allOrders" :key="idx">
					<view class="good-head">
						<view class="good-code">订单编号：{{order.orderNumber}}</view>
					</view>
					<view class="zhongjian">
						<view class="zj-left">
							<!-- <view class="good-info">下单用户：{{order.user}}</view>
							<view class="good-info">订单金额：¥{{order.money}}</view>
							<view class="good-info">联系方式：{{order.number}}</view>
							<view class="good-info">下单时间：{{order.time}}</view>
							<view class="good-info">完成时间：{{order.time}}</view> -->
							<view class="good-info">订单金额：¥{{order.totalAmount}}</view>
							<view class="good-info">下单时间：{{order.orderTime}}</view>
							<view class="good-info">完成时间：{{order.updateTime}}</view>
							<view class="good-info">支付方式：{{order.payType}}</view>
						
						</view>
						<view class="zj-right">
							+{{order.merchantAmount}}
						</view>
					
					</view>
				</view>

		</view>
	<!-- 	<view class="bottom" v-if="selected==2">
			<view style="display:flex;justify-content: space-between;margin-bottom: 20rpx;">
				<view>2025-10-01-15:26</view>
				<view>+55</view>
				<view>订单</view>
			</view>
			<view style="display:flex;justify-content: space-between;">
				<view>2025-10-01-15:26</view>
				<view>+5</view>
				<view>其他</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>

	import {
		ref,
		computed,
		onMounted,
		watch,
		
	} from 'vue'
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	import { orderdata } from '../../api/orderData'
	import {fetchXiaodian} from '../../api/xiaodian.js'
	const columns = ['今天', '近7天', '近30天']
	const c = ['today','recent7days','recent30days']
	const index = ref(0)
	const selected = ref(1)
	const totalOrderCount = ref(0)   //支付订单数
	const totalMerchantAmount = ref(0)   //收益
	const pickChange = e => {
		index.value = e.detail.value
		gotXd()
		}
	const selectOne=()=>{
		selected.value =1
	}
	const selectTwo=()=>{
		selected.value =2
	}
	

	
	const allOrders = ref([])
	

	const previewImages = (imgs) => {
	  wx.previewImage({
	    current: imgs[0],        // 首张
	    urls: imgs               // 全部
	  })
	}
	const refresh = ()=>{
		uni.startPullDownRefresh()
	}
	//获取列表
		
	const gotXd = async()=>{
		const res = await fetchXiaodian({
			dateRangeType:c[index.value]
		})
		allOrders.value = res.data.orders
		totalOrderCount.value = res.data.totalOrderCount
		totalMerchantAmount.value = res.data.totalMerchantAmount
	}
	onMounted(async() => {
		// allOrders.value = orderdata
		gotXd()
	})
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f1f2f3;
	}
	.header{
		margin-top: 20rpx;
		width:90%;
		height:100rpx;
		display: flex;
		justify-content: space-between;
		
	}
	.hl,.hr{
		display: flex;
		align-items: center;
	}
	.icon-shuaxin{
		width:40rpx;
		height:40rpx;
	}
	.icon-xia{
		width:30rpx;
		height:20rpx;
	}
/* 	.icon-you{
		width:30rpx;
		height:30rpx;
	} */
	.picker-box {
		padding: 10rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
	}
	.body{
		display: flex;
		
		width:90%;
		background-color: white;
		justify-content: space-around;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}
	.body::after{
		background-color: #007AFF;
	}
	.bl,.br{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bnum{
		font-size: large;
		font-weight: 550;
		margin: 30rpx 0;
		line-height: 60rpx;
	}
	.active{
		border-bottom: #00aa00 solid 4rpx;
	}
	.btext{
		color: #b3bab9;
	}
	.bbutton{
		width:auto;
		padding:5rpx 10rpx;
		background-color: #e5e5e5;
		border:solid 1rpx #878787;
		border-radius: 15rpx;
	}
	.bottom{
		flex: 1;
	/* 	border: solid 1rpx #007AFF; */
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		
		width:95%;
		margin-bottom: 20rpx;
	}
	::-webkit-scrollbar {
		  display: none; /* 隐藏滚动条 */
		  width: 0; /* 设置滚动条宽度为 0 */
		  height: 0; /* 设置滚动条高度为 0 */
		  background: transparent; /* 设置滚动条背景透明 */
		}
	
	.good {
		display: flex;
		flex-direction: column;
		height:300rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(47, 47, 47, 0.0);
	}
	.zhongjian{
		width:100%;
		display: flex;
		height:auto;
	}
	.zj-right{
		width:150rpx;
		height:150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: x-large;
		color:green;
	}
	.swiper { width: 100%; height: 100%; }
	.slide-img { width: 100%; height: 100%; border-radius: 8rpx; }
		
	.zj-left{
		flex:1
	}
	
	.good-code,
	.good-info {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	.good-code{
		font-weight: 550;
	}
		
	.good-head{
		border-bottom: #d5e6fd solid 1rpx;
		line-height: 50rpx;
		margin-bottom: 18rpx;
		display: flex;
		width:100%;
	}
	.good-code{
		flex:1;
	}
</style>